<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:650px; height:410px"></div>
<div id="main1" style="width:650px; height:410px"></div>
<script type="text/javascript">
    var myCharts=echarts.init(document.getElementById('main'));
    myCharts.setOption({
        color: ['#18d6b9'],
        tooltip: {},
        radar: {//雷达图坐标系组件，只适用于雷达图
            indicator: [//雷达图的指示器，用来指定雷达图中的多个变量（维度）
                {name: '语文', //指示器名称
                 max: 100//指示器的最大值  //还可以设置颜色color和最小值  //标签特定的颜色
                },
                {name: '数学', max: 100},
                {name: '英语', max: 100},
                {name: '物理', max: 100},
                {name: '化学', max: 100},
            ],
            center: ['50%', '50%'],
        },

        series: [
            {
                name: '完成情况',
                type: 'radar',
                data: [
                    {
                        value: ['30', '50', '60', '40', '50'],
                        name: '学科'
                    }]

            }
        ]
    })

//
    var myCharts1=echarts.init(document.getElementById('main1'));
    myCharts1.setOption({
        title: { text:null }, // 隐藏图表标题
        legend: { enabled: false }, // 隐藏图例
        tooltip : {
            trigger: 'axis'
        },
        calculable : true,
        polar : [
            {
                nameGap : 10, // 图中工艺等字距离图的距离
                center:['50%','50%'], // 图的位置
                name:{
                    show: true, // 是否显示工艺等文字
                    formatter: null, // 工艺等文字的显示形式
                    textStyle: {
                        color:'#a3a5b6' // 工艺等文字颜色
                    }
                },
                indicator : [
                    {text : '工艺', max  : 100},
                    {text : '设备', max  : 100},
                    {text : '安全', max  : 100},
                    {text : '工艺', max  : 100},
                    {text : '仪表', max  : 100}
                ],
                axisLine: {            // 坐标轴线
                    show: false        // 默认显示，属性show控制显示与否
                },
                axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                    show: false,
                    textStyle: {
                        color: '#247bd7' // 坐标轴刻度文字的样式
                    }
                },
                splitArea : {
                    show : true,
                    areaStyle : {
                        color: ["#18D6B9"]  // 图表背景网格的颜色
                    }
                },
                splitLine : {
                    show : true,
                    lineStyle : {
                        width : 1,
                        color : '#FFB800' // 图表背景网格线的颜色
                    }
                }
            }
        ],
        series : [
            {
                name: '完全实况球员数据',
                type: 'radar',
                symbol: "none", // 去掉图表中各个图区域的边框线拐点
                itemStyle: {
                    normal: {
                        color : "rgba(0,0,0,0)", // 图表中各个图区域的边框线拐点颜色
                        lineStyle: {
                            color:"white" // 图表中各个图区域的边框线颜色
                        },
                        areaStyle: {
                            type: 'default'
                        }
                    }
                },
                data : [
                    {
                        value : [50, 42, 88, 60, 90],
                        itemStyle: {
                            normal: {
                                areaStyle: {
                                    type: 'default',
                                    opacity: 0.8, // 图表中各个图区域的透明度
                                    color: "#1686c2" // 图表中各个图区域的颜色
                                }
                            }
                        },
                        name : '重整'
                    },
                    {
                        value : [90, 32, 74, 20, 60],
                        itemStyle: {
                            normal: {
                                areaStyle: {
                                    type: 'default',
                                    /*opacity: 1,*/
                                    color: "#6eaf97" // 图表中各个图区域的颜色
                                }
                            }
                        },
                        name : '催化'
                    }
                ]
            }
        ]
    })
</script>
</body>
</html>